<template>
  <PageCaontainer>
    <a-card class="index-develop-card">
      <ATable
        :columns="INDEX_DEVELOPE_COLUMNS"
        :data="metricsTableData"
        :loading="loading"
        :pagination="pageConfig"
        :bordered="false"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #cnName="{ record }">
          <a-button
            type="text"
            @click="
              () => {
                visible = true;
                indexPrecessObj = record;
              }
            "
          >
            {{ record.cnName }}</a-button
          >
        </template>
        <template #developStatus="scope">
          <span v-if="scope.record.developStatus">已开发</span>
          <span v-else>待开发</span>
        </template>
      </ATable>
      <a-drawer
        :visible="visible"
        :footer="false"
        @cancel="
          () => {
            visible = false;
            metricsTable();
          }
        "
        :esc-to-close="false"
        :mask-closable="false"
        placement="right"
        width="720px"
        unmountOnClose
      >
        <template #title> 指标加工 </template>
        <div class="dev-drawer">
          <div class="dev-drawer_tag">
            <span
              :class="['tag-btn', METRICS_TYPE[indexPrecessObj.metricsType].bg]"
            >
              {{ METRICS_TYPE[indexPrecessObj.metricsType].name }}
            </span>
            <span class="col_grey">ID：{{ indexPrecessObj.id }}</span>
          </div>
          <div class="dev-drawer_title">
            {{ indexPrecessObj.cnName }}
          </div>
          <div class="dev-drawer_tabs">
            <a-tabs default-active-key="process">
              <a-tab-pane key="process" title="加工">
                <v-precessing :index-precess-obj="indexPrecessObj" />
              </a-tab-pane>
              <!-- <a-tab-pane key="kinship" title="血缘"></a-tab-pane>
                <a-tab-pane key="data" title="物化数据"></a-tab-pane> -->
              <a-tab-pane key="message" title="指标信息">
                <mertrics-message
                  :index-precess-obj="indexPrecessObj"
                ></mertrics-message>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </a-drawer>
    </a-card>
  </PageCaontainer>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import PageCaontainer from '@/arco-components/PageContainer';
import AQueryTable from '@dangojs/a-query-table';
import VPrecessing from './components/precessing/index.vue';
import mertricsMessage from './components/mertricsMessage/index.vue';
import API from '@/services';
import { INDEX_DEVELOPE_COLUMNS, METRICS_TYPE } from '@/constants/indexDevelop';
import type { IPageConfigVO } from '@/types/base';
// 抽屉
const visible = ref<boolean>(false);

// 分页的属性配置
const indexPrecessObj: any = ref();
const metricsTableData: any = ref();
const loading = ref(false);
const pageConfig = reactive<IPageConfigVO>({
  total: 0,
  pageSize: 10,
  pageNum: 1,
  showTotal: true, // 是否显示总数
  showJumper: false, // 是否显示跳转
  showPageSize: true, // 是否显示数据条数选择器
  pageSizeOptions: [10, 20, 30, 40, 50],
  hideOnSinglePage: true
});

const metricsTable = async () => {
  const { pageSize, pageNum } = pageConfig;
  loading.value = true;
  try {
    const { code, data } = await API.metricsModelRelation.postPageQuery({
      pageSize,
      pageNum
    });
    if (code === 200) {
      metricsTableData.value = data?.list || 0;
      pageConfig.total = data?.total || 0;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

// 表格分页 和  改变一页数量
const handlePageChange = (pageNum: any) => {
  pageConfig.pageNum = pageNum;
  metricsTable();
};
const handlePageSizeChange = (pageSize: any) => {
  pageConfig.pageNum = 1;
  pageConfig.pageSize = pageSize;
  metricsTable();
};
onMounted(() => {
  metricsTable();
});
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>